<template>
  <div>
    <head-top
      routerName="taskList"
      :title="taskData.packageName | formatFront"
    ></head-top>
    <div class="content-wrap">
      <div class="lislt-box">
        <van-loading v-if="loading" size="20" text-size="14"
          >加载中...</van-loading
        >
        <div
          class="lislt"
          v-for="(item, index) in taskLsit"
          :key="index"
          v-else
        >
          <div class="head">
            <div class="name">
              <span>{{ item.orderNo }}</span>
            </div>
            <div class="right" :class="item.taskStatus == '0' ? 'color' : ''">
              <template v-if="taskData.statusIndexOf == '0'">已完成</template>
              <template v-else-if="item.taskStatus == '0'"
                ><div  @click="watchVideo">去完成任务<van-icon name="arrow" /></div
              ></template>
              <template v-else>今日任务已完成</template>
            </div>
          </div>
          <div class="time">
            <div class="item-time">
              <span class="label">释放时间：</span
              ><span
                >{{ item.startTime | formatDate }} ~
                {{ item.endTime | formatDate }}</span
              >
            </div>
            <div class="item-time">
              <span class="label">兑换时间：</span
              ><span>{{ item.createTime | formatDate1 }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Icon, Loading } from "vant";
import { packageDetails } from "@/api/task";
import { formatDate } from "@/assets/js/date";
import { watchVideo } from "@/utils/APPempower";
import HeadTop from "@/components/head";
export default {
  components: {
    [Icon.name]: Icon,
    [Loading.name]: Loading,
    HeadTop,
  },
  data() {
    return {
      taskData: {},
      taskLsit: [],
      loading: true,
    };
  },
  filters: {
    formatDate(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
    formatDate1(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
    formatFront(text) {
      const index = text.indexOf(" ");
      if (index !== -1) {
        return text.substring(0, index);
      } else {
        return text;
      }
    },
  },
  created() {
    this.taskData = this.$route.query;
    const data = {
      status: this.taskData.status,
      packageId: this.taskData.packageId,
    };
    this.loading = true;
    packageDetails(data).then((res) => {
      this.taskLsit = res.data.resultData;
      this.loading = false;
    });
  },
  methods: {
    watchVideo() {
      watchVideo();
    },
  },
};
</script>
<style lang="less" scoped>
.content-wrap {
  .lislt-box {
    padding-top: 17px;
  }
  .lislt {
    margin-bottom: 17px;
    padding: 0 14px;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
    border-radius: 1px;
    .head {
      display: flex;
      align-items: center;
      height: 42px;
      border-bottom: 1px solid #f1f1f1;
      .name {
        flex: 1;
        font-size: 12px;
        font-weight: 500;
        color: #333333;
        line-height: 22px;
      }
      .right {
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #666666;
        &.color {
          color: #fe4b08;
        }
      }
    }
    .time {
      padding-bottom: 10px;
      .item-time {
        display: flex;
        align-items: center;
        padding-top: 10px;
        span {
          color: #666666;
          font-size: 12px;
        }
        .label {
          color: #333333;
          font-size: 14px;
        }
      }
    }
  }
}
</style>